<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1720967367,570303970&fm=26&gp=0.jpg" />
    <link rel="stylesheet" href="../xiaomi-official-website-static/css/case03.css">
    <title>用户注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            height: 100%;
            background-color: #F9F9F9;
        }

        #box {
            width: 1200px;
            height: 600px;
            background-color: #fff;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 45px;
        }

        #logo {
            width: 49px;
            height: 48px;
            margin: 0 auto;
            background-image: url(https://account.xiaomi.com/static/res/349d9c1/account-static/respassport/acc-2014/img/milogo.png);
            background-repeat: no-repeat;
        }

        h1 {
            font-weight: lighter;
            text-align: center;
            margin-top: 30px;
        }

        input[type="text"],
        input[type="password"] {
            width: 294px;
            height: 38px;
            border: 1px solid #E8E8E8;
            position: relative;
            outline-color: #FF6700;
            display: block;
            margin: 0 auto;
            padding-left: 6px;
        }

        #username {
            margin-top: 30px;
        }

        #password {
            margin-top: 6px;
        }

        #regBtn {
            padding: 18px;
            display: block;
            margin-left: 180px;
            color: white;
            background-color: #FF6700;
            border: none;
            outline: none;
            cursor: pointer;
            margin-top: 28px;
            transition: .3s;
        }

        #regBtn:hover {
            box-shadow: 0px 0px 3px 1px #B1A298;
        }

        #protocol {
            text-align: center;
            color: gray;
            font-size: 13px;
            margin-bottom: 20px;
            margin-top: 25px;
            margin-right: 320px;
        }

        a {
            font-weight: bolder;
            text-decoration: none;
            color: black;
        }

        footer {
            width: 100%;
            height: 90px;
            position: absolute;
            bottom: 0;
            overflow: hidden;
        }

        p {
            text-align: center;
            font-size: 12px;
            color: grey;
        }

        ul {
            width: 300px;
            height: 20px;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
        }

        li {
            font-size: 14px;
            height: 14px;
            float: left;
            border-right: 1px solid grey;
            list-style: none;
        }

        .copy {
            color: gray;
            line-height: 14px;
            font-weight: normal;
            display: block;
            padding-right: 17px;
        }

        .copy:hover {
            color: #333;
        }

        li:nth-of-type(4) {
            border-right: none;
        }
    </style>
    <script>

    </script>
</head>

<body>
    <div id="box">
        <div id="logo"></div>
        <h1>注册小米帐号</h1>
        <div class="box-body">
        <form style="margin-left: 27%" id>
            <table id="table">
                <tr>
                    <th style="vertical-align: inherit;">用户名称：</th>
                    <td><input type="text" name="username" placeholder="长度4~12，英文大小写字母" id="username"></td>
                    <td>
                        <div></div>
                    </td>
                </tr>
                <tr>
                    <th>密　　码：</th>
                    <td><input type="password" name="pwd" placeholder="长度6~20，大小写字母、数字或下划线" id="pwd"></td>
                    <td>
                        <div></div>
                    </td>
                </tr>
                <tr>
                    <th>确认密码：</th>
                    <td><input type="password" name="repwd" placeholder="请再次输入密码进行确认" id="repwd"></td>
                    <td>
                        <div></div>
                    </td>
                </tr>
                <tr>
                    <th>手机号码：</th>
                    <td><input type="text" name="tel" placeholder="13、14、15、17、18开头的11位手机号" id="tel"></td>
                    <td>
                        <div></div>
                    </td>
                </tr>
                <tr>
                    <th>电子邮箱：</th>
                    <td><input type="text" name="email" placeholder="用户名@域名（域名后缀至少2个字符）" id="email"></td>
                    <td>
                        <div></div>
                    </td>
                </tr>
                <tr>

                </tr>
            </table>
            <div id="regBtn" onclick="regBtn()" style="width: 80px">立即注册</div>
            <p id="protocol">已阅读并同意:小米<a href="userProtocol.html">用户协议</a>和<a href="userPrivacy.html">隐私政策</a></p>
        </form>
        </div>


    </div>
    <footer>
        <ul>
            <li><a href="" class="copy">简体</a></li>
            <li><a href="" class="copy">繁体</a></li>
            <li><a href="" class="copy">English</a></li>
            <li><a href="" class="copy">常见问题</a></li>
        </ul>
        <p>小米公司版权所有-京ICP备10046444-<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134"
                target="_blank"><img
                    src="https://account.xiaomi.com/static/res/9204d06/account-static/respassport/acc-2014/img/ghs.png"></a>京公网安备11010802020134号-京ICP证110507号
        </p>
    </footer>

    <script src="js/register.js"></script>
</body>

</html>